<template>
	<view class="remarkBox">
		<view class="remark">
			<view class="left">
				<image class="avatar" :src="$attrs.avatar"></image>
			</view>
			<view class="right">
				<view class="top">
					<text class="realname">{{$attrs.realname}}</text>
					<text class="time">{{$attrs.time | format}}</text>
					<i class="iconfont icondianzan" @click.capture="addremark"></i>
					<text class="goodNum">{{goodNum}}</text>
					<i class="iconfont iconshanchu" v-if="CanDel" @click="delRemark"></i>
				</view>
				<view class="bottom" @click="startRecomment">
					<view>
						{{$attrs.content}}
					</view>
				</view>
			</view>
		</view>
		<view class="recomment">
			<recomment v-for="item,index in allRecommentList" :key="item.id"
			:avatar="item.avatar" :content="item.content" :goodNum="item.goodNum" :id="item.id"
			:time="item.time" :remarkId="$attrs.id" :realname="item.realname" :username="item.username"></recomment>
		</view>
	</view>
</template>

<script>
	import {formatTime} from "../../formatTime.js"
	import recomment from "./recomment.vue"
	export default{
		components:{
			recomment
		},
		data(){
			return{
				id:this.$attrs.id,
				goodNum:this.$attrs.goodNum,
				allRecommentList:[]
			}
		},
		filters:{
			format(val){
				return formatTime(parseInt(val))
			}
		},
		computed:{
			CanDel(){
				return this.$attrs.username == uni.getStorageSync("usernameInfo").username
			}
		},
		created() {
			this.getAllRecomment()
		},
		methods:{
			delRemark(){
				this.$emit("startDelRemark",this.$attrs)
			},
			startRecomment(){
				this.$emit("startAddRecomment",this.$attrs)
			},
			getAllRecomment(){
				uni.request({
					method:"get",
					url:"https://www.ttzxh.icu:443/api/recomment/search",
					data:{
						blogId:this.$attrs.blogId,
						commentId:this.$attrs.id
					},
					success:(res)=>{
						if(res.data.error===-1){
							this.allRecommentList = res.data.data
						}else{
							this.allRecommentList = []
						}
					},
					fail: () => {
						
					}
				})
			},
			addremark(){
				uni.request({
					method:"post",
					url:"https://www.ttzxh.icu:443/api/comment/update",
					data:{
						id:this.$attrs.id,
						goodNum:this.$attrs.goodNum+1
					},
					success: (res) => {
						console.log(res)
						this.goodNum+=1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.remarkBox{
		.remark{
			box-sizing: border-box;
			margin: 5px;
			display: flex;
			width: 100%;
			padding: 10px;
			transition: all .3s;
			&:active{
				background-color: #C7DEFF;
			}
			.left{
				margin-right: 10px;
				text-align: center;
				color: #fff;
				font-size: 14px;
				.avatar{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background-color: #bbbbbb;
				}
			}
			.right{
				.top{
					font-size: 14px;
					color: $uni-text-select-color;
					.time{
						margin: 0 15px;
					}
					i{
						color: $uni-dianzan;
					}
					.iconshanchu{
						color: red;
					}
					.goodNum{
						margin: 0 10px 0 3px;
					}
				}
				.bottom{
					font-size: 14px;
					color: #fff;
					.recomment{
						margin-top: 10px;
					}
				}
			}
		}
	}
</style>
